import React, {useEffect} from 'react';
import {Modal, Form, Input, Button, Space, message} from "antd";
import {useDispatch} from "react-redux";
import {useAppDispatch} from "@/hooks";
import {postHospitalSetAsync} from "@/store/slice/hosp";

type TModalProps = {
    isModalVisible:boolean,
    setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>,
    modalTitle:string,
    hospitalSetInfo:any
}
function HospitalModal(props:TModalProps) {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    useEffect(()=>{
        // 判断是否点击了添加或修改
        if(props.hospitalSetInfo){
            form.setFieldsValue(props.hospitalSetInfo);// 初始化表单
        }
    },[props.hospitalSetInfo])
    return (
        <Modal title={props.modalTitle}
               // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
               footer={null}
               visible={props.isModalVisible}
               // 点击蒙层是否允许关闭
               maskClosable={false}
               // onOk={handleOk}
               // 点击遮罩层或右上角叉或取消按钮的回调
               onCancel={()=>{
                   form.resetFields();// 清空表单
                   props.setIsModalVisible(false);
               }}
        >
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                // initialValues={{}}
                onFinish={async values => {
                    await dispatch(postHospitalSetAsync(values));
                    form.resetFields();// 清空表单
                    props.setIsModalVisible(false);
                    message.success(props.modalTitle+"成功");


                }}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item hidden={true} name={"id"}>
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{
                        required: true,
                        min:2,
                        max:20,
                        message: '请输入医院名称!长度为2-15' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{
                        required: true,
                        message: '请输入医院编号'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="API基础地址"
                    name="apiUrl"
                    rules={[{
                        required: true,
                        pattern:/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                        message: '请输入正确的API基础地址'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{
                        required: true,
                        message: '请输入正确的联系人姓名'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[{
                        required: true,
                        pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                        message: '请输入正确的联系人手机'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={()=>{
                            form.resetFields();// 清空表单
                        }}>
                            清空
                        </Button>
                    </Space>

                </Form.Item>
            </Form>
        </Modal>
    );
}

export default HospitalModal;